<template>
	<view class="">
		<view class="top bg-white">
			<view class="flex align-center border-bottom" style="padding-bottom: 14rpx;">
				<view class="top-img">
					<image :src="info.avatar" style="width: 100%;height: 100%;border-radius: 50%;"></image>
				</view>
				<view class="" style="font-size: 24rpx;">
					<view class="">医生：{{info.name}}</view>
					<view class="">职位：{{info.position}}</view>
					<view class="">科室：{{info.department}}</view>
				</view>
			</view>
			<view class="top-info">擅长项目：{{info.desc}}</view>
		</view>
		
		<view class="tab mx-2">
			<view class="tab-item" :class="tabIndex==0?'tab-itemd':''" @click="checktab(0)">个人简介</view>
			<view class="tab-item" :class="tabIndex==1?'tab-itemd':''" @click="checktab(1)">TA的项目</view>
		</view>
		
		<view class="mx-2">
			<view class="bg-white p-2 mt-2" v-if="tabIndex==0">
				<u-parse :html="info.content"></u-parse>
			</view>
			<view class="list flex align-center justify-between flex-wrap" v-else>
				<view class="list-item bg-white my-2" v-for="(item,index) in list"  :key="index" @tap="jump('/pages/goods/detail', { id: item.id})">
					<view class="title">{{item.title}}</view>
					<view style="width: 330rpx;height: 330rpx;">
						<image :src="item.image" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="flex align-center justify-between mt-2">
						<view class="price">￥{{item.price}}</view>
						<view class="yuan">原价<span class="jia">￥{{item.original_price}}</span></view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {postDetail,postExpertGoodsList} from '@/api/expert.js'
	export default{
		data(){
			return{
				tabIndex:0,
				id:0,
				info:'',
				list:[],
				page:1
			}
		},
		onLoad(options) {
			if(options.id){
				this.id=options.id
				this.getData()
			}
		},
		methods:{
			//分类切换
			checktab(e){
				this.tabIndex=e
				if(e==1) this.getList(0);
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			getData(){
				postDetail({id:this.id}).then(res=>{
					this.info=res.data
				})
			},
			getList(type){
				var data={
					id:this.id,
					page:this.page
				}
				postExpertGoodsList(data).then(res=>{
					if(res.data.length>0){
						if(type==1){
							res.data.forEach((item,index)=>{
								this.list.push(item)
							})
							this.page++
						}else{
							this.list=res.data
						}
					}else{
						uni.showToast({
							title:type==0?'暂无数据':'已经到底了',
							icon:'none',
							duration:1000
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.top{
		padding: 15rpx;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	.top-img{
		width: 122rpx;
		height: 123rpx;
		border-radius: 50%;
		margin-right: 27rpx;
	}
	.top-info{
		font-size: 24rpx;
		margin-top: 30rpx;
		padding-bottom: 74rpx;
	}
	.tab{
		display: flex;
		align-items: center;
		
	}
	.tab-item{
		font-size: 24rpx;
		color: #131414;
		width: 230rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
	}
	.tab-itemd{
		background: linear-gradient(to right, #E1EBF8, #B4CEEC);
		color: #F6F6F6;
	}
	.list-item{
		padding: 9rpx;
		width: 348rpx;
		height: 462rpx;
		border-radius: 10rpx;
	}
	.title{
		width: 283rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		font-size: 28rpx;
		margin-bottom: 21rpx;
	}
	.price{
		color: #C31358;
		font-size: 26rpx;
		font-weight: bold;
	}
	.yuan{
		font-size: 24rpx;
		color: #616161;
		font-weight: 500;
	}
	.jia{
		margin-left: 15rpx;
		text-decoration: line-through;
	}
</style>